<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <div>
          <router-link :to="{ path: '/news/add' }">
            <Button
              type="primary"
              icon="md-add"
              v-if="Validation.check(Resources.NEWS_ADD)"
              >新增推送
            </Button>
          </router-link>
        </div>
        <CompanySelector
          style="width: 300px; margin-right: 10px"
          :tagCount="100"
          :companyId="bloc.form.companyId"
          @on-change="(value) => (bloc.form.companyId = value)"
          v-if="Validation.isRootCompany"
        ></CompanySelector>
        <Input
          placeholder="发布人"
          v-model="bloc.form.userName"
          style="width: 180px; margin-right: 10px"
        />
        <Input
          placeholder="推送标题"
          v-model="bloc.form.title"
          style="width: 180px; margin-right: 10px"
        />
        <Select
          style="width: 180px; margin-right: 10px"
          placeholder="推送状态"
          size="default"
          v-model="bloc.form.pushStatus"
        >
          <Option value="NOT_PUSH">未推送</Option>
          <Option value="PUSH_SUCCESS">推送成功</Option>
          <Option value="PUSH_RECALL">可重新推送</Option>
        </Select>
        <DatePicker
          type="daterange"
          placeholder="添加时间"
          format="yyyy/MM/dd"
          v-model="bloc.form.date"
          :editable="false"
          style="width: 200px; margin-right: 10px"
        ></DatePicker>
        <Button
          type="primary"
          icon="ios-search"
          style="margin-right: 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
          >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
          >重置</Button
        >
      </div>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button
              size="small"
              @click="pushItem(row)"
              v-if="
                row.pushStatus !== 'PUSH_SUCCESS' &&
                Validation.check(Resources.NEWS_PUSH)
              "
              type="warning"
              >推送
            </Button>
            <Button
              size="small"
              @click="cancelPush(row)"
              v-if="row.pushStatus !== 'PUSH_SUCCESS' && Validation.check(Resources.NEWS_PUSH)"
              type="warning"
              >撤销推送
            </Button>
            <Button
              size="small"
              @click="modifyItem(row, 0)"
              v-if="
                row.pushStatus !== 'PUSH_SUCCESS' &&
                Validation.check(Resources.NEWS_UPDATE)
              "
              type="info"
              >编辑
            </Button>
            <Button
              size="small"
              @click="removeItem(row)"
              v-if="
                row.pushStatus !== 'PUSH_SUCCESS' &&
                Validation.check(Resources.NEWS_DELETE)
              "
              type="warning"
              >删除
            </Button>
            <Button
              size="small"
              @click="modifyItem(row, 1)"
              v-if="
                row.pushStatus === 'PUSH_SUCCESS' &&
                Validation.check(Resources.NEWS)
              "
              type="info"
              >详情
            </Button>
            <Button
            size="small"
            @click="detailItem(row)"
            v-if="
            row.pushStatus === 'PUSH_SUCCESS' &&
            Validation.check(Resources.NEWS) && row.targetGroup === 'PART_MEMBER'
            "
            type="info"
            >查看推送会员
            </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Route } from 'vue-router';
import { ListBloc } from '@/view/news/ListBloc';
import { News } from '@/base/model/News';
import { formatDate } from '@/base/util/Dates';
import CompanySelector from '@/component/CompanySelector.vue';
import { Validation } from '@/base/Validation';
import { Resources } from '@/base/Resources';

const getColumns = (bloc: ListBloc) => [
  {
    title: '所属品牌商',
    render: (h: any, params: any) => {
      return h('span', {
        domProps: {
          innerText: bloc.getCompanyName(params.row.companyId)
        }
      });
    },
    align: 'left',
    minWidth: 150,
    tooltip: true
  },
  {
    title: '推送标题',
    key: 'title',
    align: 'left',
    minWidth: 200,
    tooltip: true
  },
  // {
  //   title: '目标类型',
  //   align: 'left',
  //   render: (h: any, params: any) => {
  //     return h('span', {
  //       domProps: {
  //         innerText: bloc.getTargetType(params.row.targetType)
  //       }
  //     });
  //   },
  //   width: 100,
  //   tooltip: true
  // },
  // {
  //   title: '目标链接',
  //   key: 'targetLinks',
  //   align: 'left',
  //   minWidth: 100,
  //   tooltip: true
  // },
  {
    title: '目标人群',
    render: (h: any, params: any) => {
      return h('span', {
        domProps: {
          innerText:
            params.row.targetGroup === 'ALL_MEMBER' ? '全体会员' : '部分会员'
        }
      });
    },
    align: 'left',
    minWidth: 100,
    tooltip: true
  },
  {
    title: '消息类型',
    render: (h: any, params: any) => {
      const obj = {
        OPEN_URL: '打开链接',
        // OPEN_INFO: "打开资讯",
        OPEN_NEWS: '打开消息'
      };
      return h('span', {
        domProps: {
          innerText: obj[params.row.actions] || ''
        }
      });
    },
    align: 'left',
    minWidth: 100,
    tooltip: true
  },
  {
    title: '推送状态',
    render: (h: any, params: any) => {
      const obj = {
        NOT_PUSH: '未推送',
        PUSH_SUCCESS: '推送成功',
        PUSH_RECALL: '可重新推送'
      };
      return h('span', {
        domProps: {
          innerText: obj[params.row.pushStatus] || ''
        }
      });
    },
    align: 'left',
    width: 100,
    tooltip: true
  },
  {
    title: '发布人',
    key: 'userName',
    align: 'left',
    width: 100,
    tooltip: true
  },
  {
    title: '推送时间',
    render: (h: any, params: any) => {
      return h('span', {
        domProps: {
          innerText: formatDate(
            new Date(params.row.pushTime),
            'yyyy-MM-dd hh:mm:ss'
          )
        }
      });
    },
    width: 160,
    align: 'left',
    tooltip: true
  },
  {
    title: '添加时间',
    render: (h: any, params: any) => {
      return h('span', {
        domProps: {
          innerText: formatDate(
            new Date(params.row.created),
            'yyyy-MM-dd hh:mm:ss'
          )
        }
      });
    },
    width: 160,
    align: 'left',
    tooltip: true
  },
  {
    title: '操作',
    slot: 'action',
    width: 47 * 4 + 61 * 0 + 75 * 1 + 20,
    align: 'left',
    fixed: 'right'
  }
];

@Component({ components: { CompanySelector } })
export default class extends Vue {
  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next((vm) => {
      vm.bloc
        .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
        .catch((e) => {
          vm.$Message.error('操作错误');
        });
    });
  }

  bloc: ListBloc = new ListBloc();
  columns = getColumns(this.bloc);
  Validation = Validation;
  Resources = Resources;

  removeItem(dataItem: News) {
    this.$Modal.confirm({
      title: '提示',
      content: '确认删除后将无法恢复！还要继续吗？',
      okText: '删除',
      cancelText: '取消',
      onOk: () => {
        this.bloc
          .removeItem(dataItem)
          .then((value) => {
            this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize);
          })
          .then(() => {
            this.$Message.success('删除成功');
          })
          .catch((e) => {
            this.$Message.error('删除失败');
          });
      }
    });
  }

  pushItem(dataItem: News) {
    this.$Modal.confirm({
      title: '提示',
      content: `确认推送吗？`,
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        this.bloc.pushItem(dataItem.id).then((res) => {
            this.$Message.success('推送成功');
        }).catch((err) => {
                this.$Message.error( err.message);
        }).finally(() => {
            this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize);
        });
      }
    });
  }

  modifyItem(dataItem: News, isDetail: number) {
    const num = isDetail + '';
    this.$router.push({ path: `/news/${dataItem.id}`, query: { detail: num } });
  }
  detailItem(dataItem: News) {
      this.$router.push({ path: `/news/detail/detail/${dataItem.id}` });
  }
  cancelPush(dataItem: News) {
    this.$Modal.confirm({
      title: '提示',
      content: '撤销推送后将无法恢复！还要继续吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        this.bloc
          .cancelItem(dataItem.id)
          .then((value) => {
            this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize);
          })
          .then(() => {
            this.$Message.success('撤销推送成功');
          })
          .catch((e) => {
            this.$Message.error(e.message || '撤销推送失败');
          });
      }
    });
  }
}
</script>

<style lang="less">
.list-query-box {
  display: flex;
}
</style>
